<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 多种风格底部设计</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            padding-top: 2rem;
            padding-bottom: 2rem;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }
        
        .footer-example {
            margin-bottom: 5rem;
            padding: 2rem 0;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0,0,0,0.05);
        }
        
        .footer-title {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #eee;
            font-weight: 600;
        }
        
        /* 通用底部样式 */
        .footer {
            width: 100%;
        }
        
        .footer .nav-link {
            padding: 0.25rem 0;
            margin-right: 1rem;
            color: inherit;
        }
        
        .footer .nav-link:hover {
            color: #0d6efd;
        }
        
        .social-links .social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            transition: all 0.3s ease;
            margin-right: 0.5rem;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-5">Bootstrap 多种风格底部设计</h1>
        
        <!-- 1. 简约风格底部 -->
        <div class="footer-example">
            <h2 class="footer-title">1. 简约风格底部</h2>
            <footer class="footer bg-light py-5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <h5 class="mb-3">关于我们</h5>
                            <p class="text-muted">我们致力于提供高质量的产品和服务，为用户创造更好的体验。</p>
                        </div>
                        <div class="col-md-3 mb-4">
                            <h5 class="mb-3">快速链接</h5>
                            <ul class="nav flex-column">
                                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">首页</a></li>
                                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">产品</a></li>
                                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">服务</a></li>
                                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">联系我们</a></li>
                            </ul>
                        </div>
                        <div class="col-md-3 mb-4">
                            <h5 class="mb-3">联系我们</h5>
                            <ul class="nav flex-column">
                                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted"><i class="fas fa-envelope me-2"></i> contact@example.com</a></li>
                                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted"><i class="fas fa-phone me-2"></i> +86 123 4567 8910</a></li>
                                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted"><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-sm-row justify-content-between pt-4 border-top">
                        <p class="text-muted">&copy; 2023 公司名称. 保留所有权利.</p>
                        <div class="social-links mt-3 mt-sm-0">
                            <a href="#" class="social-icon bg-light text-dark border"><i class="fab fa-weixin"></i></a>
                            <a href="#" class="social-icon bg-light text-dark border"><i class="fab fa-weibo"></i></a>
                            <a href="#" class="social-icon bg-light text-dark border"><i class="fab fa-qq"></i></a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        
        <!-- 2. 现代深色风格底部 -->
        <div class="footer-example">
            <h2 class="footer-title">2. 现代深色风格底部</h2>
            <footer class="footer bg-dark text-white py-5">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-4 col-md-6 mb-4">
                            <h4 class="mb-4">品牌名称</h4>
                            <p class="text-gray-400 mb-4">创新设计，卓越品质，为您提供全方位的解决方案。</p>
                            <div class="social-links">
                                <a href="#" class="social-icon bg-secondary text-white"><i class="fab fa-weixin"></i></a>
                                <a href="#" class="social-icon bg-secondary text-white"><i class="fab fa-weibo"></i></a>
                                <a href="#" class="social-icon bg-secondary text-white"><i class="fab fa-qq"></i></a>
                                <a href="#" class="social-icon bg-secondary text-white"><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                        
                        <div class="col-lg-2 col-md-3 mb-4">
                            <h5 class="mb-4">产品</h5>
                            <ul class="nav flex-column">
                                <li class="mb-2"><a href="#" class="nav-link text-gray-400">产品系列</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-gray-400">新品上市</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-gray-400">热门推荐</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-gray-400">优惠活动</a></li>
                            </ul>
                        </div>
                        
                        <div class="col-lg-2 col-md-3 mb-4">
                            <h5 class="mb-4">支持</h5>
                            <ul class="nav flex-column">
                                <li class="mb-2"><a href="#" class="nav-link text-gray-400">帮助中心</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-gray-400">联系客服</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-gray-400">常见问题</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-gray-400">售后服务</a></li>
                            </ul>
                        </div>
                        
                        <div class="col-lg-4 col-md-6 mb-4">
                            <h5 class="mb-4">订阅通讯</h5>
                            <p class="text-gray-400 mb-3">订阅我们的通讯，获取最新产品和活动信息</p>
                            <form class="mb-3">
                                <div class="input-group">
                                    <input type="email" class="form-control" placeholder="您的邮箱地址" aria-label="您的邮箱地址">
                                    <button class="btn btn-primary" type="button">订阅</button>
                                </div>
                            </form>
                            <p class="text-gray-500 small">我们尊重您的隐私，不会向第三方分享您的信息</p>
                        </div>
                    </div>
                    
                    <div class="border-top border-gray-800 pt-5 mt-5">
                        <div class="d-flex flex-wrap justify-content-between">
                            <p class="text-gray-500">© 2023 品牌名称. 保留所有权利.</p>
                            <div class="d-flex mt-3 mt-sm-0">
                                <a href="#" class="nav-link text-gray-500 me-4">隐私政策</a>
                                <a href="#" class="nav-link text-gray-500 me-4">使用条款</a>
                                <a href="#" class="nav-link text-gray-500">Cookie 政策</a>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        
        <!-- 3. 企业风格底部 -->
        <div class="footer-example">
            <h2 class="footer-title">3. 企业风格底部</h2>
            <footer class="footer bg-white border-top py-5">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 mb-4">
                            <h5 class="mb-3">公司简介</h5>
                            <p class="text-muted mb-4">成立于2005年，是行业领先的解决方案提供商，专注于为企业客户提供高质量的产品和服务。</p>
                            <p class="text-muted">
                                <i class="fas fa-map-marker-alt me-2"></i> 北京市海淀区科技园区88号<br>
                                <i class="fas fa-phone me-2"></i> 010-12345678<br>
                                <i class="fas fa-envelope me-2"></i> info@company.com
                            </p>
                        </div>
                        
                        <div class="col-md-2 mb-4">
                            <h5 class="mb-3">关于我们</h5>
                            <ul class="nav flex-column">
                                <li class="mb-2"><a href="#" class="nav-link text-muted">公司简介</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">发展历程</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">企业文化</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">团队介绍</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">新闻中心</a></li>
                            </ul>
                        </div>
                        
                        <div class="col-md-2 mb-4">
                            <h5 class="mb-3">产品服务</h5>
                            <ul class="nav flex-column">
                                <li class="mb-2"><a href="#" class="nav-link text-muted">产品中心</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">解决方案</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">服务支持</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">技术咨询</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">成功案例</a></li>
                            </ul>
                        </div>
                        
                        <div class="col-md-2 mb-4">
                            <h5 class="mb-3">投资者关系</h5>
                            <ul class="nav flex-column">
                                <li class="mb-2"><a href="#" class="nav-link text-muted">财务报告</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">股票信息</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">投资者公告</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">投资者活动</a></li>
                            </ul>
                        </div>
                        
                        <div class="col-md-2 mb-4">
                            <h5 class="mb-3">联系我们</h5>
                            <ul class="nav flex-column">
                                <li class="mb-2"><a href="#" class="nav-link text-muted">联系方式</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">在线留言</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">加入我们</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">意见反馈</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="border-top pt-4 mt-4">
                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                            <p class="text-muted mb-3 mb-md-0">© 2023 企业名称 版权所有 | 京ICP备12345678号</p>
                            <div class="d-flex align-items-center">
                                <a href="#" class="nav-link text-muted me-3">隐私政策</a>
                                <a href="#" class="nav-link text-muted me-3">使用条款</a>
                                <a href="#" class="nav-link text-muted me-3">网站地图</a>
                                <div class="social-links">
                                    <a href="#" class="social-icon bg-light text-dark border"><i class="fab fa-weixin"></i></a>
                                    <a href="#" class="social-icon bg-light text-dark border"><i class="fab fa-weibo"></i></a>
                                    <a href="#" class="social-icon bg-light text-dark border"><i class="fab fa-linkedin"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        
        <!-- 4. 电商风格底部 -->
        <div class="footer-example">
            <h2 class="footer-title">4. 电商风格底部</h2>
            <footer class="footer bg-white py-5">
                <div class="container">
                    <!-- 服务保障 -->
                    <div class="row mb-5 border-bottom pb-5">
                        <div class="col-md-3 text-center">
                            <div class="mb-2 text-primary">
                                <i class="fas fa-truck fa-2x"></i>
                            </div>
                            <h5>全场免运费</h5>
                            <p class="text-muted small">订单满99元免运费</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="mb-2 text-primary">
                                <i class="fas fa-shield-alt fa-2x"></i>
                            </div>
                            <h5>正品保障</h5>
                            <p class="text-muted small">100%正品保障</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="mb-2 text-primary">
                                <i class="fas fa-exchange-alt fa-2x"></i>
                            </div>
                            <h5>7天无理由退换</h5>
                            <p class="text-muted small">购物无忧</p>
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="mb-2 text-primary">
                                <i class="fas fa-headphones fa-2x"></i>
                            </div>
                            <h5>24小时客服</h5>
                            <p class="text-muted small">专业客服团队</p>
                        </div>
                    </div>
                    
                    <!-- 导航链接 -->
                    <div class="row mb-5">
                        <div class="col-md-4 mb-4">
                            <h5 class="mb-3">客户服务</h5>
                            <ul class="nav flex-column">
                                <li class="mb-2"><a href="#" class="nav-link text-muted">帮助中心</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">订单查询</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">配送方式</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">支付方式</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">售后服务</a></li>
                            </ul>
                        </div>
                        
                        <div class="col-md-4 mb-4">
                            <h5 class="mb-3">关于我们</h5>
                            <ul class="nav flex-column">
                                <li class="mb-2"><a href="#" class="nav-link text-muted">平台介绍</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">招商入驻</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">商家后台</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">加入我们</a></li>
                                <li class="mb-2"><a href="#" class="nav-link text-muted">联系我们</a></li>
                            </ul>
                        </div>
                        
                        <div class="col-md-4 mb-4">
                            <h5 class="mb-3">关注我们</h5>
                            <div class="mb-3">
                                <img src="https://picsum.photos/120/120" alt="微信公众号二维码" class="img-fluid rounded" width="120">
                            </div>
                            <p class="text-muted mb-3">扫码关注公众号，获取最新优惠</p>
                            <div class="social-links">
                                <a href="#" class="social-icon bg-primary text-white"><i class="fab fa-weixin"></i></a>
                                <a href="#" class="social-icon bg-red text-white"><i class="fab fa-weibo"></i></a>
                                <a href="#" class="social-icon bg-blue text-white"><i class="fab fa-qq"></i></a>
                                <a href="#" class="social-icon bg-orange text-white"><i class="fab fa-tiktok"></i></a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 版权信息 -->
                    <div class="border-top pt-4">
                        <div class="text-center text-muted mb-3">
                            <a href="#" class="nav-link d-inline-block me-3">隐私政策</a>
                            <a href="#" class="nav-link d-inline-block me-3">用户协议</a>
                            <a href="#" class="nav-link d-inline-block me-3">免责声明</a>
                            <a href="#" class="nav-link d-inline-block">网站地图</a>
                        </div>
                        <p class="text-center text-muted small">© 2023 电商平台 版权所有 | 营业执照 | 食品经营许可证 | 京ICP备12345678号</p>
                        <div class="text-center mt-3">
                            <img src="https://picsum.photos/400/50" alt="支付方式" class="img-fluid" style="max-height: 50px;">
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        
        <!-- 5. 简约紧凑风格底部 -->
        <div class="footer-example">
            <h2 class="footer-title">5. 简约紧凑风格底部</h2>
            <footer class="footer bg-light py-4">
                <div class="container">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                        <div class="mb-3 mb-md-0">
                            <p class="text-muted mb-0">&copy; 2023 品牌名称. 保留所有权利.</p>
                        </div>
                        
                        <div class="d-flex flex-wrap justify-content-center mb-3 mb-md-0">
                            <a href="#" class="nav-link text-muted me-4">首页</a>
                            <a href="#" class="nav-link text-muted me-4">关于我们</a>
                            <a href="#" class="nav-link text-muted me-4">服务</a>
                            <a href="#" class="nav-link text-muted me-4">联系我们</a>
                            <a href="#" class="nav-link text-muted">隐私政策</a>
                        </div>
                        
                        <div class="social-links">
                            <a href="#" class="social-icon bg-white text-dark border"><i class="fab fa-weixin"></i></a>
                            <a href="#" class="social-icon bg-white text-dark border"><i class="fab fa-weibo"></i></a>
                            <a href="#" class="social-icon bg-white text-dark border"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="social-icon bg-white text-dark border"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
